<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="zh-cn" style="height: 100%">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title><?=VIEW_TITLE?></title>
    <link href="<?php echo base_url('/assets/bs/'); ?>css/bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo base_url('/assets/css/'); ?>my_common.css" rel="stylesheet">
    <link href="<?php echo base_url('/assets/cropper/dist/cropper.min.css'); ?>" rel="stylesheet">
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<?php
$this->load->view('admin_header.php');
?>
<div class="container">
    <form action="<?php echo site_url('taskworker/userCenter') ?>" method="post" id="myform"
          enctype="multipart/form-data"
          onsubmit="return check();">
        <div id="main_div" style="max-width: 720px;margin: auto;">
            <div class="row">
                <div class="header_img_div col-xs-2" style="width: 120px;padding-top: 20px">
                    <a href="#" class="thumbnail" style="height: 110px;width: 100px;">
                        <img id="img"
                             src="<?php echo !empty($user['header_image']) ? base_url('assets/header_img/') . $user['header_image'] : base_url('assets/header_img/moren.jpeg') ?>"
                             data-src="holder.js/100%x180"
                             alt="点击修改头像" style="height: 100px;width: 100px;">
                    </a>
                    <button type="button" class="btn btn-primary btn-xs" style="margin-left: 20px"
                            onclick="openModel()">上传头像
                    </button>
                </div>
                <div class="content_div col-xs-12 col-sm-10" style="max-width: 600px">
                    <div class="col-sm-1 col-md-1" style="padding: 0;">
                        <span class="glyphicon glyphicon-user" style="font-size: 24px;margin-top: 15px;"></span>
                        <span class="glyphicon glyphicon-book" style="font-size: 24px;margin-top: 15px;"></span>
                        <span class="glyphicon glyphicon-home" style="font-size: 24px;margin-top: 15px;"></span>
                        <span class="glyphicon glyphicon-list-alt" style="font-size: 24px;margin-top: 15px;"></span>
                    </div>
                    <div class="col-sm-10 col-md-10" style="padding: 0;">
                        <input style="margin-top: 10px;" type="text" class="form-control" id="name"
                               placeholder="昵称(如果你不改昵称，你就没法拿稿费了哟)"
                               name="name" value="<?php echo $user['name']; ?>">
                        <div class="row">
                            <div class="col-sm-6 col-md-6 col-xs-6" style="">
                                <input style="margin-top: 10px;" type="text"
                                       class="form-control col-sm-5 col-md-5 col-xs-5" id="school" placeholder="学校"
                                       name="school" value="<?php echo $user['school']; ?>">
                            </div>
                            <div class="col-sm-6 col-md-6 col-xs-6" style="">
                                <input style="margin-top: 10px;" type="text"
                                       class="form-control col-sm-5 col-md-5 col-xs-5" id="professional"
                                       placeholder="专业"
                                       name="professional" value="<?php echo $user['professional']; ?>">
                            </div>
                        </div>
                        <input style="margin-top: 10px;" type="text" class="form-control" id="address_life"
                               placeholder="所在地"
                               name="address_life" value="<?php echo $user['address_life']; ?>">
                        <input style="margin-top: 10px;" type="text" class="form-control" id="introduce"
                               placeholder="一句话介绍"
                               name="introduce" value="<?php echo $user['introduce']; ?>">
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div style="text-align: right;max-width: 600px;margin: 20px 0 0 auto;">
        <button type="button" class="btn btn-primary" style="" onclick="post()">保存修改!</button>
    </div>
    <div class="panel panel-default" style="max-width: 720px;margin: 20px auto 0 auto;">
        <div class="panel-heading">我的发布</div>
        <div class="panel-body" style="background-color: #f5f5f5;">
            <div id="scroll_div" style="overflow-y: auto;overflow-x: hidden;">
                <div id="task_div">

                </div>
            </div>
            <div>
                <nav style="text-align: center;margin-top: 0">
                    <ul class="pagination" id="page_ul">
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="mymodel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">更换头像</h4>
            </div>
            <div class="modal-body">
                <input id="input_select" type="file" style="display: none;" name="input_select">
                <div class="row">
                    <div class="col-sm-6 col-md-6 col-xs-6">
                        <img class="img-thumbnail" id="img_1"
                             src="<?php echo base_url('assets/header_img/moren.jpeg') ?>"
                             style="width: 200px;">
                    </div>
                    <div class="col-sm-6 col-md-6 col-xs-6">
                        <div class="col-sm-12 col-md-12 col-xs-12">
                            <img class="img-thumbnail" id="img_2"
                                 src="<?php echo base_url('assets/header_img/moren.jpeg') ?>"
                                 style="width: 100px;">
                        </div>
                        <div class="col-sm-12 col-md-12 col-xs-12" style="margin-top: 20px">
                            <button type="button" class="btn btn-primary btn-xs" id="select_file"
                                    style="margin-left: 20px"
                                    onclick="input_select.click();">选择图片
                            </button>

                        </div>

                        <div class="col-sm-12 col-md-12 col-xs-12" style="margin-top: 20px">
                            <button type="button" id='jiequ' class="btn btn-primary btn-xs" style="margin-left: 20px"
                                    onclick="">确认截取
                            </button>
                        </div>

                    </div>
                </div>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-primary" onclick="postHeaderImg()">保存修改</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php echo base_url('/assets/bs/'); ?>js/bootstrap.min.js"></script>
<script src="<?php echo base_url('/assets/cropper/dist/cropper.min.js'); ?>"></script>
<?php
$this->load->view('nf_footer.php');
?>
<script>
    var w_width = document.documentElement.clientWidth;
    var w_height = document.documentElement.clientHeight;
    var scroll_div_height = w_height - 320;
    var is_submit = false;
    function selectImg() {
        console.log($('#input_select').val());
        $('#img').attr('src', $('#input_select').val());
    }

    $(function () {
        $("#input_select").change(function () {
            if (!isPhoto()) {
                return false;
            }
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#img_1");
            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src', dataURL);
                cropper();
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementById("preview");
                // 两个坑:
                // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
                // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
        });
    });

    function post() {
        $('#myform').submit();
    }

    function isPhoto() {
        //判断图片类型
        var f = document.getElementById("input_select").value;
        if (f == "") {
            alert("请上传图片");
            return false;
        } else {
            if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f)) {
                alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
                return false;
            }
        }
        return true;
    }

    function postHeaderImg() {
        if (header_img_file == null || header_img_file == '') {
            alert('请先截取合适的图片!');
            return false;
        }
        var fd = new FormData();
        fd.append("header_image", header_img_file, "image.png");
        $.ajax({
            url: "<?php echo site_url('taskworker/changeHeaderImg')?>",
            type: "post",
            data: fd,
            dataType: 'json',
            cache: false,
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(data);
                if (data == 'success') {
                    window.location.reload();
                } else {
                    alert(data);
                }
            },
            error: function (e) {
            }
        });
    }

    function check() {
        var name = $('#name').val();
        var school = $('#school').val();
        var address_life = $('#address_life').val();
        var introduce = $('#introduce').val();
        var professional = $('#professional').val();
        if (name == '' || school == '' || address_life == '' || introduce == '' || professional == '') {
            alert('请填写完整信息!');
            return false;
        }
    }

    var this_page = 1;
    var this_rows = 5;
    var this_page_sum = 0;
    var this_del_id = 0;
    var this_manager_id = 0;
    var this_translation_article_id = 0;

    function getTaskJson() {
        $.ajax({
            url: '<?php echo site_url('taskworker/getMyTaskJson');?>',
            type: 'post',
            dataType: 'json',
            data: {
                page: this_page,
                rows: this_rows
            },
            success: function (data) {
                buildTask(data['list']);
                buildPageUl(data['count_all']);
            }
        });
    }
    function getPage(page) {
        this_page = page;
        getTaskJson();
    }

    function nextPage() {
        if (this_page < this_page_sum) {
            ++this_page;
        }
        getPage(this_page);
    }
    function lastPage() {
        if (this_page != 1) {
            --this_page;
        }
        getPage(this_page);
    }

    function buildPageUl(count_all) {
        $('#page_ul').empty();
        var page_num = Math.ceil(count_all / this_rows);
        this_page_sum = page_num;
        var html = '';
        html += '<li><a href="javascript:getPage(1)">&laquo;</a></li><li class=""><a href="javascript:lastPage()">上一页</a></li>';
        for (var i = 0; i < page_num; i++) {
            if (this_page == (i + 1)) {
                html += '<li class="active"><a href="javascript:getPage(' + (i + 1) + ')">' + (i + 1) + '</a></li>';
            } else {
                html += '<li><a href="javascript:getPage(' + (i + 1) + ')">' + (i + 1) + '</a></li>';
            }
        }
        html += '<li class=""><a href="javascript:nextPage()">下一页</a></li><li><a href="javascript:getPage(' + page_num + ')">&raquo;</a></li>';
        $('#page_ul').append(html);
    }

    function buildTask(task_list) {
        var html = '';
        var len = task_list.length;
        for (var i = 0; i < len; i++) {
            html += '<div style="position: relative;" class="panel panel-default" id="task_main_div_' + task_list[i]['id'] + '">';
            html += '<span class="badge" style="position: absolute;top:10px;left:10px;">' + task_list[i]['id'] + '</span>';
            html += '<div class="panel-body " style="text-align:center;position: relative;margin-top: 15px;">';
//            html += '<span class="pull-left badge">' + task_list[i]['id'] + '</span>';
            html += '<div style="text-align: center" class="">' + task_list[i]["title"] + '</div>';
            if (task_list[i]['is_proofreaded'] != 2) {
                html += '<div class="" style="min-width:90px;display:inline-block;text-align: center;margin-top: 20px;width: 24%;">';
                if (task_list[i]['is_received'] == 0) {
                    html += '<button type="button" class="btn btn-default" disabled="disabled" style="width: 82px;">未领取</button>';
                } else if (task_list[i]['is_received'] == 1) {
                    html += '<button type="button" class="btn btn-default" disabled="disabled" style="width: 82px;">已领取</button>';
                } else if (task_list[i]['is_received'] == 2) {
                    html += '<button type="button" class="btn btn-default" disabled ="disabled" style ="width: 82px;">已领取</button>';
                }
                html += '</div>';

                html += '<div style = "min-width:90px;display:inline-block;text-align:center;margin-top:20px;width:24.9%;">';
                html += '<button type="button" class="btn btn-danger" style="width: 82px;" onclick="originalChange(' + task_list[i]["id"] + ')">修改原文</button>';
                html += '</div>';

                html += '<div class="clearfix visible-xs-block"></div> <div style = "min-width:90px;display:inline-block;text-align:center;margin-top:20px;width:24%;">';
                if (task_list[i]['is_translationed'] == 0) {
                    html += '<button type = "button" class="btn btn-default" disabled="disabled" style="width:82px;">翻译</button>';
                } else if (task_list[i]['is_translationed'] == 1) {
                    html += '<button type="button" class= "btn btn-default" disabled="disabled" style="width:82px;">翻译中</button>';
                } else if (task_list[i]['is_translationed'] == 2) {
                    html += '<button type = "button" class= "btn btn-default" disabled="disabled" style="width: 82px;">已翻译</button>';
                }
                html += '</div>';
                html += '<div style="min-width:90px;display:inline-block; text-align:center;margin-top:20px;width:24.9%;">';
                if (task_list[i]['is_proofreaded'] == 0) {
                    if (task_list[i]['is_translationed'] != 2) {
                        html += '<button type="button" class="btn btn-default" disabled="disabled" style="width: 82px;">未校对</button>';
                    } else {
                        html += '<button type="button" class="btn btn-default btn-primary" style="width: 82px;" onclick="jiaodui(' + task_list[i]['id'] + ',' + task_list[i]['is_translationed'] + ',' + task_list[i]['is_proofreaded'] + ')">未校对</button>';
                    }
                } else if (task_list[i]['is_proofreaded'] == 1) {
                    html += '<button type="button" class="btn btn-default btn-primary" style="width: 82px;" onclick="jiaodui(' + task_list[i]['id'] + ',' + task_list[i]['is_translationed'] + ',' + task_list[i]['is_proofreaded'] + ')">校对中</button>';
                } else if (task_list[i]['is_proofreaded'] == 2) {
                    html += '<button type="button" class="btn btn-default btn-success" disabled="disabled" style="width: 82px;">已校对</button>';
                }
                html += '</div>';
            } else {
                html += '<div class="row" style="line-height: 30px;text-align: center;">';
                html += '<span class="col-xs-4 col-sm-4 col-md-4" style="">分数:' + task_list[i]['score'] + '</span>';
                html += '<span class="col-xs-4 col-sm-4 col-md-4" style="">译员名:' + task_list[i]['ta_name'] + '</span>';
                html += '<span class="col-xs-4 col-sm-4 col-md-4" style="">任务专员名:' + task_list[i]['oa_name'] + '</span>';
                html += '<span class="col-xs-4 col-sm-4 col-md-4" style=""><a href="javascript:readfangyi(' + task_list[i]['id'] + ',' + task_list[i]['is_received'] + ',' + task_list[i]['is_translationed'] + ',' + task_list[i]['is_proofreaded'] + ');">查看翻译</a></span>';
                html += '<span class="col-xs-4 col-sm-4 col-md-4" style=""><a href="javascript:jiaodui(' + task_list[i]['id'] + ',' + task_list[i]['is_translationed'] + ',' + task_list[i]['is_proofreaded'] + ')">查看校对</a></span>';
                html += '</div>';
            }
            html += '</div>';
            if (task_list[i]['is_proofreaded'] != 2) {
                html += '<div class="panel-heading" style="text-align: right;background-color: white;font-size: 12px;">';
                html += '<span style="display:block;">by:' + task_list[i]['oa_name'] + '</span>';
                if (task_list[i]['translation_article_id'] != 0) {
                    html += '<span style="display:block;">to:' + task_list[i]['ta_name'] + '</span>';
                }

                html += '</div>';
            }
//            html += '<div class="panel-heading" style="background-color: white;text-align: right;padding: 0 15px 5px 15px;color: #6a6b6c;font-size: 12px;"><span>by:' + task_list[i]['oa_name'] + '</span></div>';
            html += '</div>';
        }
        $('#task_div').empty();
        $('#task_div').append(html);
    }
    getPage(this_page);
    function jiaodui(manager_id, is_translationed, is_proofreaded) {
        if (is_translationed != 2) {
            alert('该文章译员尚未翻译完毕,请等待译员提交!');
            return false;
        }
        window.location.href = "<?php echo site_url('taskworker/proofread?manager_id=')?>" + manager_id;
    }
    function readfangyi(manager_id, is_received, is_translationed, is_proofreaded) {
        window.location.href = "<?php echo site_url('taskworker/translation')?>" + "?manager_id=" + manager_id;
    }
    function jiaodui(manager_id, is_translationed, is_proofreaded) {
        if (is_translationed != 2) {
            alert('该文章译员尚未翻译完毕,请等待译员提交!');
            return false;
        }
        window.location.href = "<?php echo site_url('taskworker/proofread?manager_id=')?>" + manager_id;
    }
    function originalChange(manager_id) {
        window.location.href = "<?php echo site_url('taskworker/changeOriginal?manager_id=')?>" + manager_id;
    }

    /**
     * 我的头像blob对象
     */
    var header_img_file;
    function openModel() {
        $('#mymodel').modal('show');
    }

    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type: mime});
    }

    function cropper() {
        var $image = $('#img_1');
        var $button = $('#jiequ');
        var $result = $('#result');
        var croppable = false;
        $image.cropper({
            aspectRatio: 1,
            viewMode: 1,
            built: function () {
                croppable = true;
            }
        });

        $button.on('click', function () {
            var croppedCanvas;
            var roundedCanvas;
            if (!croppable) {
                return;
            }
            croppedCanvas = $image.cropper('getCroppedCanvas');
            var dataUrl = croppedCanvas.toDataURL();
            $("#img_2").attr('src', dataUrl);
            $result.html('<img src="' + croppedCanvas.toDataURL() + '">');
            header_img_file = dataURLtoBlob(dataUrl);
        });
    }
</script>
</body>
</html>